import Icon from '@/components/Icon';
import { useAppDispatch } from '@/store';
import {
  collectByIdAction,
  getDetailByIdAction,
  likeByIdAction,
} from '@/store/action/article';
import { IDetail } from '@/store/reducer/article';
import { Popup } from 'antd-mobile';
import { useState } from 'react';
import CommentInput from '../CommentInput';
import styles from './index.module.scss';

type CommentFooterProps = {
  type?: 'normal' | 'reply';
  detail?: IDetail;
  handleClickComment?: () => void;
  handleShare?: () => void;
};
export default function CommentFooter({
  type = 'normal',
  detail,
  handleClickComment,
  handleShare,
}: CommentFooterProps) {
  const [visible, setVisible] = useState(false);
  const dispatch = useAppDispatch();
  const handleLikeArticle = async () => {
    await dispatch(likeByIdAction(detail!.art_id));
    dispatch(getDetailByIdAction(detail!.art_id));
  };

  const handleCollectArticle = async () => {
    if (!detail) return;

    await dispatch(collectByIdAction(detail.art_id));
    dispatch(getDetailByIdAction(detail!.art_id));
  };
  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div className="input-btn" onClick={() => setVisible(true)}>
          <Icon type="iconbianji" />
          <span>去评论</span>
        </div>

        {type === 'normal' && (
          <>
            <div className="action-item" onClick={handleClickComment}>
              <Icon type="iconbtn_comment" />
              <p>评论</p>
              {!!detail?.comm_count && <span className="bage">{detail?.comm_count}</span>}
            </div>
            <div className="action-item" onClick={handleLikeArticle}>
              <Icon
                type={detail?.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'}
              />
              <p>点赞</p>
            </div>
          </>
        )}
        <div className="action-item" onClick={handleCollectArticle}>
          <Icon type={detail?.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'} />
          <p>收藏</p>
        </div>
        <div className="action-item" onClick={handleShare}>
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>
      </div>
      <Popup destroyOnClose visible={visible} onMaskClick={() => setVisible(false)}>
        <CommentInput onClose={() => setVisible(false)} />
      </Popup>
    </div>
  );
}
